<template>
	<view>
		<view>
			<image :src="get_img+'sys/tree/background.png'" class="image"></image>
		</view>
		<!-- 上层图片 -->
		<view @click="show3=false" v-if="show3&&is_tree==true" style="z-index: 999;position: absolute;margin-top:50% ;">
			<u-image mode="scaleToFill" width="750rpx" height="400rpx" :src="get_img+'sys/tree/ts.png'"></u-image>
		</view>
		<view></view>
		<!-- 树 -->
		<view v-if="tree.state==0">
			<image :src="get_img+'sys/tree/green.png'" class="tree"></image>
		</view>
		<view v-else-if="tree.state==1">
			<image :src="get_img+'sys/tree/yellow.png'" class="tree"></image>
		</view>
		<!-- <view v-else-if="tree.state==2">
			<image :src="get_img+'sys/tree/red.png'" class="tree" :style="'z-index: '+tree_index+';'"
				@click="get_red_pacage()"></image>
		</view> -->

		<view class="_a">
			<!-- 头像 -->
			<view class="avatar" @click="red_packet">
				<!-- <u-avatar :src="infor.avatar"></u-avatar> -->
				<u-image width="70rpx" height="80rpx" :src="get_img+'sys/image/hb.png'"></u-image>
				<view style="color: #fff;font-size: 35rpx;">红包</view>
			</view>
			<!-- 水壶 -->
			<view>
				<view class="_b" @click="get_watering()" style="">
					<view class="yuan"></view>
					<view class="img">
						<image :src="get_img+'sys/tree/shuihu.png'" class="shuihu"></image>
					</view>
					<view style="margin-left: 18rpx;color: #FFFFFF;font-size: 35rpx;">浇水</view>
				</view>
				<view class="shuihu1" v-if="anamit_url">
					<image :src="get_img+anamit_url" class="shuihu1_img"></image>
				</view>

			</view>

			<!-- 进度条 -->
			<view class="line">
				<view class="lines">
					<u-line-progress :showText="tree" :percentage="get_speed()" activeColor="#D70D20"
						inactiveColor="#FFEE00" height="15rpx"></u-line-progress>
				</view>
			</view>

			<!-- 红包 -->
			<view>
				<u-popup v-if="is_tree==false" :show="red_url!=''" mode="center" bgColor="rgba(255,255,255,0)">
					<image :src="get_img+red_url" class="red" @click="open_red"></image>
				</u-popup>
				<u-popup :show="red_url!=''" mode="center" bgColor="rgba(255,255,255,0)">
					<image :src="get_img+red_url" class="red" @click="open_red"></image>
				</u-popup>
			</view>
			<view>
				<view class="rule">{{sys.tree_rule}}</view>
			</view>
			<image style="position: absolute;z-index: -1000;opacity: 0.1;left: 999rpx;height: 100rpx;"
				v-for="(item,index) in load_urls" :key="index" :src="get_img+item"></image>
		</view>
	</view>
</template>

<script>
	var _self
	export default {
		data() {
			return {
				show: true,
				show3: true,
				infor: {},
				get_img: this.$get_img,
				tree: {},
				anamit_url: "",
				red_url: "",
				state: true,
				sys: {},
				is_tree: false,
				show_red: 0,
				tree_index: 2,
				is_water: false,
				load_urls: [
					"sys/tree/background.png",
					'sys/tree/green.png',
					'sys/tree/yellow.png',
					'sys/tree/red.png'
				]
			}
		},
		onLoad() {
			_self = this
			this.sys = uni.getStorageSync("sys")
			this.get_tree()
		},
		onShow() {
			let is_tree = uni.getStorageSync("is_tree")
			uni.setStorageSync("is_tree", true)
			this.is_tree = is_tree || false
			this.get_infor()
		},
		methods: {
			get_infor() {
				let that = this
				this.$model.get("user/get_infor").then(res => {
					if (res.code == 200) {
						uni.setStorageSync("infor", res.data)
						that.infor = res.data
					}
				})
			},
			//判断是否有红包
			check_red() {
				console.log(this.tree)
				if (this.tree.state == 2 || this.is_tree == false) {
					this.red_url = 'sys/tree/envelopes.png'
				}
			},
			red_packet() {
				uni.setStorageSync("infor_packet", this.infor)
				uni.navigateTo({
					url: '/pages/index/red_packet'
				})
			},
			get_tree() {
				let that = this
				this.$model.get("user/task/get_tree").then(res => {
					if (res.code == 200) {
						that.tree = res.data

						that.check_red()
					}
				})
			},
			get_red_pacage() {
				this.red_url = 'sys/tree/envelopes.png'
				this.tree_index = -1
			},
			open_red() {
				let that = this
				this.$model.get("user/task/get_red_packet").then(res => {
					if (res.code == 200) {
						that.red_url = 'sys/tree/collar.png'
						uni.showModal({
							title: "恭喜您，获得红包:" + res.data.get_price + "元",
							showCancel: false,
							success() {
								that.red_url = ""
								that.tree = res.data
								that.tree_index = 1
							}
						})
					}
				})
			},
			get_speed() {
				let data = this.tree.now_tice / this.sys.tree_total
				data = parseInt(data * 100)
				console.log(data)
				return data;
			},
			//浇水按钮
			water_bt() {
				// this.get_watering()
				this.water_action()
			},
			//浇水动画动作
			water_action() {
				let that = this
				that.anamit_url = "sys/tree/shuihu.png"
				setTimeout(function() {
					that.anamit_url = "sys/tree/shuihu2.png"
					setTimeout(function() {
						that.anamit_url = ""
						that.is_water = false
					}, 1000)

				}, 1000)
			},
			get_watering() {
				console.log("getwater:", this.is_water)
				if (this.is_water) {
					return; //结束执行
				}
				this.is_water = true
				let that = this
				if (this.infor.tree < 1) {

					uni.showModal({
						title: '您今日浇水次数已用完，请浏览楼盘获取浇水机会 ',
						showCancel: false,
						success: function(res) {
							_self.is_water = false
							uni.navigateTo({
								url: '../house/house?type=tree' + "&id=" + that.sys.chick_nav
							})
						}
					})
					return;
				}
				this.$model.get("user/task/update_tree").then(res => {
					if (res.code == 200) {
						_self.get_infor()
						_self.tree = res.data
						_self.check_red()
						_self.water_action()

						_self.is_water = false

					}
				})
			},
			open() {

			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style>
	.image {
		width: 100vw;
		height: 100vh;
		z-index: -9999;
		position: fixed;
	}

	.tree {
		z-index: -1;
		position: fixed;
		height: 1180rpx;
		margin-top: 80upx;
		width: 750rpx;
	}

	._a {
		z-index: 0;
		position: fixed;
	}



	.avatar {
		width: 70rpx;
		margin-top: 700rpx;
		margin-left: 40rpx;
	}

	._b {
		width: 150rpx;
		margin: -160rpx 00rpx 30rpx 630rpx;
	}

	.yuan {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: #FFF
	}

	.img {
		width: 150rpx;
		margin: -105rpx 0rpx 0 -45rpx;
	}

	.shuihu {
		width: 140rpx;
		height: 100rpx;
	}

	.shuihu1 {
		width: 300rpx;
		margin: -500rpx 140rpx 0 0;
		float: right;
	}

	.shuihu1_img {
		width: 250rpx;
		height: 170rpx;
	}

	.line {
		width: 190rpx;
		height: 20rpx;
		float: right;
		border-radius: 50rpx;
		background-color: #E07A0B;
		box-shadow: 0rpx 0rpx 10rpx 2rpx #E07A0B;
		margin: 0rpx 80rpx 0 0;
	}

	.lines {
		width: 180rpx;
		height: 20rpx;
		margin: 4rpx 3rpx 0 6rpx;
	}

	.red {
		width: 700rpx;
		height: 800rpx;
	}

	.rule {
		z-index: 0;
		width: 680rpx;
		height: 260rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		color: #97BF30;
		margin-left: 45rpx;
		font-size: 36rpx;
	}
</style>
